<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<link rel="stylesheet" type="text/css" href="/assets/css/main.css">

<%
	String contextPath = request.getContextPath();

    String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + contextPath;

    String csspath=path+"/assets/css/";
    String imagepath=path+"/images/";
    String controllerPath=path+"/admin/rel/relative/";

%>


<section id="event" class="main">
				<header class="major">
                        <h2 style="float: left;">生平</h2>
                        <div class="div-show-hover">
                            <button class="button special small " onclick="edit_event()">编辑</button>       
                        </div>
                    </header>

                <div id="div_event_main">
                    
                    
					<div id="cd-timeline" class="cd-container">

						<c:forEach var="event" items="${events}" varStatus="status">
                                <div class="cd-timeline-block" >
                                    <div class="cd-timeline-img first">
                                        <img src="<%=imagepath%>circle.svg" alt="${status.index}" >
                                    </div>
                                    <div class="cd-timeline-content" data-id="${event.eventId}">
                                        <p>${event.eventInfo}</p>
                                        <span class="cd-date">${event.getDateOfString()}</span>  
                                    </div>
                                </div>
                        </c:forEach>

                    </div>                      
                    
                </div>

                <div id="div_event_edit" style="display: none;">
                	<form method="post" action="<%=controllerPath%>save_event" id="form_event_edit" ajaxPost="true" onSuccess="onSuccess">
                	<input type="hidden" name="relative_id" value="${rel.relativeId}">
                	<table class="cntable table table-bordered dataTable table-employee ">
                        <thead>
							<tr>
								<th style="width:150px">时间</th>
								<th style="width:400px">事件</th>
							</tr>
						</thead>
                        <tbody id="eventlist">
                            <c:forEach var="event" items="${events}" varStatus="status">
                                <tr data-id="${event.eventId}">
                                    <td><input type="date" name="event_date" value="${event.getDateOfString()}" ></td>
                                    <td><input type="text" name="event_info" value="${event.eventInfo}" >
                                    <input type="hidden" name="event_id" value="${event.eventId}">
                                    </td>
                                                                       
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                    
                    
                    <div style="padding-top: 10px;">
                            <input type="button" class="button special small" onclick="event_submit();" value="保存">
                            <input type="cancel" class="button small" onclick="event_cancel();" value="取消">
                    </div>
                    </form>
                    <div style="padding-top: 10px;">
                            <button id="btn_add" onclick="add_event()">添加</button>
                    </div>
                    
                </div>
</section>


<script type="text/javascript">

	function add_event(){
		var row = $('<tr><td><input type="date" name="event_date"></td>'
			  	   +'<td><input type="text" name="event_info">'
			  	   +'<input type="hidden" name="event_id" value=""></td>'
			  	   +'</tr>'); //create row
		$('#eventlist').append(row);
	}


</script>

<script type="text/javascript">
	function onSuccess(res){
		//$("event").html(res);

	}



	function edit_event(){
		var div1=document.getElementById("div_event_main");
		var div2=document.getElementById("div_event_edit");
		div1.style.display="none";
		div2.style.display="block";
	}

	function event_submit(){
		var div1=document.getElementById("div_event_main");
		var div2=document.getElementById("div_event_edit");
		div1.style.display="block";
		div2.style.display="none";

		$("#form_event_edit").submit(); 
	}

	function event_cancel(){
		var div1=document.getElementById("div_event_main");
		var div2=document.getElementById("div_event_edit");
		div1.style.display="block";
		div2.style.display="none";
		$("#form_event_edit").cancel();  
	}



</script>
